<template>
    <div class="app-container">
        <div class="filter-container">
                <el-input style="width: 200px;" class="filter-item" placeholder="用户名称" v-model="listQuery.userName">
                </el-input>
               
                <el-select clearable style="width: 200px" class="filter-item" v-model="listQuery.opAction" :placeholder="$t('选择业务操作')" @change="handleFilter">
                    <el-option v-for="item in $opActionOptions" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>

                 <el-select clearable style="width: 200px" class="filter-item" v-model="listQuery.opType" :placeholder="$t('选择业务类型')" @change="handleFilter">
                    <el-option v-for="item in $opTypeOptions" :key="item.key" :label="item.label" :value="item.key">
                    </el-option>
                </el-select>

                
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>

            <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" @click="restQuery">{{$t('table.reset')}}</el-button>
            <!-- <el-button class="filter-item" @click="handleCreate" type="primary" icon="el-icon-plus">{{$t('table.add')}}</el-button> -->
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%">
            <el-table-column align="center" :label="$t('table.id')" width="65">
                <template slot-scope="scope">
                    <span>{{scope.$index+1}}</span>
                </template>
            
            </el-table-column>
                <el-table-column align="center" label="用户名">
                    <template slot-scope="scope">
                        <span>{{scope.row.userName}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="业务操作">
                    <template slot-scope="scope">
                        <span>{{scope.row.opAction | $opActionFilter}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="业务类型">
                    <template slot-scope="scope">
                        <span>{{scope.row.opType | $opTypeFilter}}</span>
                    </template>
                </el-table-column>
              
                <el-table-column align="center" label="操作时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.opTime | $dateConvert('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>


                <el-table-column align="center" label="操作简介">
                    <template slot-scope="scope">
                        <span>{{scope.row.opTitle}}</span>
                    </template>
                </el-table-column>

            <el-table-column align="center" :label="$t('table.actions')" width="360" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    
                    <el-popover
                        placement="left-start"
                        title="详情"
                        width="600"
                        trigger="hover"
                        :content="scope.row.opContent">
                        <el-button slot="reference">查看详情</el-button>
                    </el-popover>

                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 400px; margin-left:50px;'>
                    <el-form-item label="用户名称" prop="userName">
                        <el-input v-model="temp.userName" ></el-input>
                    </el-form-item>
                    <el-form-item label="业务类型" prop="opType">
                        <el-input v-model="temp.opType" ></el-input>
                    </el-form-item>
                    <el-form-item label="业务ID" prop="businessId">
                        <el-input v-model="temp.businessId" ></el-input>
                    </el-form-item>
                    <el-form-item label="用户ID" prop="userId">
                        <el-input v-model="temp.userId" ></el-input>
                    </el-form-item>
                    <el-form-item label="操作时间" prop="opTime">
                        <el-input v-model="temp.opTime" ></el-input>
                    </el-form-item>
                    <el-form-item label="操作简介" prop="opContent">
                        <el-input v-model="temp.opContent" ></el-input>
                    </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="dialogStatus !== 'info'">
                <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
                <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { fetchList, infoBusinessLog, createBusinessLog, deleteBusinessLog, updateBusinessLog } from '@/api/user/businessLog'
    import waves from '@/directive/waves' // 水波纹指令
    import { parseTime } from '@/utils'

    export default {
      name: 'complexTable',
      directives: {
        waves
      },
      data() {
        return {
          tableKey: 0,
          list: null,
          total: null,
          listLoading: true,
          page: {
            page: 1,
            limit: 50,
            sort: ''
    
          },
          listQuery: {
            userName: undefined,
            opType: undefined,
            businessId: undefined,
            userId: undefined,
            opTime: undefined,
            opContent: undefined,
            'page.limit': 50,
            'page.sort': 'CREATE_TIME',
            'page.order': 'DESC'
          },
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '修改',
            create: '新增',
            info: '详情'
          },
          temp: {
            userName: '',
            opType: '',
            businessId: '',
            userId: '',
            opTime: '',
            opContent: ''
          },
          rules: {
            userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
            opType: [{ required: true, message: '业务类型不能为空', trigger: 'blur' }],
            businessId: [{ required: true, message: '业务ID不能为空', trigger: 'blur' }],
            userId: [{ required: true, message: '用户ID不能为空', trigger: 'blur' }],
            opTime: [{ required: true, message: '操作时间不能为空', trigger: 'blur' }],
            opContent: [{ required: true, message: '操作内容不能为空', trigger: 'blur' }]
          },
          downloadLoading: false
        }
      },
      filters: {
      },
      created() {
        this.getList()
      },
      methods: {
        getList() {
          this.listLoading = true
          fetchList(this.listQuery).then(response => {
            this.list = response.content.list
            this.total = response.content.total
            this.listLoading = false
          })
        },
        // 搜索按钮
        handleFilter() {
          this.listQuery.page = 1
          this.getList()
        },
        // 跳转页数
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.getList()
        },
        // 详情
        handleInfo(row, status) {
          infoBusinessLog(row.id).then(response => {
            if (response.success) {
              this.temp = Object.assign({}, response.content) // copy obj
              this.dialogStatus = status
              this.dialogFormVisible = true
              this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
              })
            }
          })
        },
        resetTemp() {
          this.temp = {
            userName: '',
            opType: '',
            businessId: '',
            userId: '',
            opTime: '',
            opContent: ''
          }
        },
        // 打开新增dialog
        handleCreate() {
          this.resetTemp()
          this.dialogStatus = 'create'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        },
        // 新增数据post
        createData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              createBusinessLog(this.temp).then(() => {
                this.getList()
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              })
            }
          })
        },
        // 更新页面
        handleUpdate(row) {
          infoBusinessLog(row.id).then(response => {
            this.temp = Object.assign({}, response.content) // copy obj
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          })
        },
        // 提交更新
        updateData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              const tempData = Object.assign({}, this.temp)
              updateBusinessLog(tempData).then(response => {
                if (response.success) {
                  this.getList()
                  this.dialogFormVisible = false
                  this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success',
                    duration: 2000
                  })
                }
              })
            }
          })
        },
        // 删除操作
        handleDelete(row) {
          this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 调用删除接口
            var p = { id: row.id }
            deleteBusinessLog(p).then(response => {
              if (response.success) {
                this.getList()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        restQuery() {
          this.listQuery.userName = ''
          this.listQuery.opAction = ''
          this.listQuery.opType = ''
          this.getList()
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
            if (j === 'timestamp') {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        }
      }
    }
</script>
